<template>
  <view class="main-container">
    <view class="hotel-title">
      <!-- <wd-icon name="thin-arrow-left" size="18px" @click="pageBack"></wd-icon>
      <view class="hotel-name">酒店民宿详情</view>
      <view style="width: 50rpx;"></view> -->
    </view>
	
	<HeaderBar title="酒店民宿详情" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
    <view class="hotel-mian">
      <wd-swiper :list="hotel.pictures" autoplay v-model:current="current" @click="() => previewImage(hotel.pictures,current)"></wd-swiper>

      <!-- 酒店信息 -->
      <view class="hotel-info">
        <view class="hetel-title">
          <view class="hotelname">{{ hotel.name }}</view>
          <img class="hotel-phone" @click="takePhone(hotel.contactMobile)" src="http://img.jowong.com/aba/2025-03-28/dianhua_1743146187416.png" alt="">
        </view>

        <view class="hotel-subtitle">{{ hotel.description }}</view>
        <view class="hotel-tags">
          <text v-for="(service, index) in hotel.tags" :key="index" class="tag">{{ gettags(service.code) }}</text>
        </view>
        <view class="introduce"> {{hotel.introduce}} </view>
        <!--  地图带  -->
        <view class="map-container" @click="handleOpenLocation(hotel)" >
          <view class="location">{{ hotel.location }}{{ hotel.address }}</view>
          <img class="map-img" src="http://img.jowong.com/aba/2025-03-28/map_1743146250706.png" alt="">
        </view>
      </view>

      <!-- 房间列表 -->
      <view class="room-list">
        <!-- 日期选择 -->
        <view class="datepicker">
          <datepicker :startDate="queryData.beginDate" :endDate="queryData.endDate" @change="getdate"></datepicker>
        </view>
        <RoomCards v-for="room in rooms" :key="room.id" :room="room" :hotelname="hotel.name" />
        <!-- <view class="lookmore">
          查看全部房源<wd-icon name="arrow-down" size="18px"></wd-icon>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue"; 
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {useMixin} from "@/hook/useMixin";
import {commonWordList} from "@/api/system";
import { useImagePreview } from '@/hook/useImagePreview'
import datepicker from "@/components/DatePicker/date-picker.vue";
import RoomCards from "@/hotelHomestay/components/RoomCard.vue";
import {hotelDetail} from "@/hotelHomestay/api/hotelHomestay";
import useHotelStore from '@/store/hotel';
const { previewImage } = useImagePreview()
const hotelStore = useHotelStore();
const pageBack = () =>{
  uni.navigateBack()
}
const headerBgc = ref("transparent");
const titleColor = ref("#2D2D2D"); 
onPageScroll((e) => { 
	if (e.scrollTop > 110) {
		headerBgc.value = "#A7C6AC";
		titleColor.value = "#2D2D2D";
	} else {
		headerBgc.value = "transparent";
		titleColor.value = "#2D2D2D";
	}
})
const current = ref(0)
const queryData = reactive({
  id:'',
  beginDate:hotelStore.beginDate,
  endDate: hotelStore.endDate,
})
const hotel = ref([]);
const rooms = ref([]);


const getdate = (e) =>{
  queryData.beginDate = e.choiceDate[0].re
  queryData.endDate = e.choiceDate[1].re
  hotelStore.setbeginDate(e.choiceDate[0].re);
  hotelStore.setendDate(e.choiceDate[1].re);
  hotelStore.setdayCount(e.dayCount)
  hotelStore.setfirstweek(e.choiceDate[0].week);
  hotelStore.setlastweek(e.choiceDate[1].week);
  getHotelDatil()
}
const getHotelDatil = () => {
  hotelDetail(queryData).then(res=>{
    console.log(res,'res');
    let {result} = res;
    hotel.value = result
    rooms.value = result.houses
    hotel.value.pictures = hotel.value.pictures.map(item => item.imgUrl)
  })
}
const handleOpenLocation = (val) => {
  uni.openLocation({
    latitude: val.lat,
    longitude: val.lnt,
    name: val.name,
  })
};
const takePhone = (phone)=>{
  uni.makePhoneCall({
    phoneNumber: phone,
    success: () => {
      console.log("拨打成功");
    },
    fail: (err) => {
      console.error("拨打失败", err);
    }
  });
}
const badData = ref([])
const queryCommonWordList = async () => {
  await commonWordList({keys:"HOTEL_TAG"}).then(res => {
    badData.value = res.result.HOTEL_TAG
  });
};
const gettags = (val)=>{
  console.log(val,'val');
  console.log(badData,'badData')
  if(!badData.value)return "";
  return badData.value.find(item => item.code == val)?.name || '';
}
onLoad((options) => {
  let {id} = options;
  queryCommonWordList();
  queryData.id = id;
  getHotelDatil();
})
</script>


<style lang="scss" scoped>
.main-container{
  min-height: 120vh;
  background: linear-gradient(to bottom, #A7C6AC 0%, #EEEFE7 15%);

  .hotel-title{
    // border: 1px solid;
    height: 62rpx;
    display: flex;
    padding:13.5% 0 30rpx 20rpx;
    align-items: center;
  }
  .hotel-name{
    width: 90%;
    height: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 33rpx;
    color: #2B2B24;
    text-align: center;
    line-height: 60rpx;
  }
  .hotel-phone{
    width: 35rpx;
    height: 35rpx;
    margin-top: 10rpx;
  }
  .hotel-mian{
    padding: 20rpx 20rpx 160rpx 20rpx;
    .hotel-image {
      width: 100%;
      height: 245rpx;
      object-fit: cover;
    }
    .hetel-title{
      padding-top: 10rpx;
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 39rpx;
      color: #2B2B24;
    }
    .hotel-subtitle{
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 25rpx;
      color: #2B2B24;
      margin: 20rpx 0;
    }
    .hotel-tags {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8rpx;
      .tag {
        font-size: 18rpx;
        // color: #fff;
        border: 1rpx solid #1B9C61;
        padding: 2rpx 6rpx;
        border-radius: 4rpx;
        margin-right: 15rpx;
      }
    }
    .introduce{
      padding: 20rpx 0;
      font-size: 20rpx;
    }
    .map-container {
      border: 1rpx dashed #ddd ;
      margin: 20rpx 0;
      width: 100%;
      height: 90rpx;
      .location{
        width: 96%;
        position: absolute;
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #2B2B24;
        margin-top: 30rpx;
      }
      .map-img{
        width: 100%;
        height:  100%;
      }
    }
    .room-list {
      background: linear-gradient(to bottom, #F9FAF7 0%, #EEEFE7 15%);
      /* 日期选择 */
      .datepicker {
        // border: 1rpx solid;
        text-align: center;
        padding: 0 5%;
        width: 90%;
      }
      .lookmore{
        padding: 50rpx 0;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 33rpx;
        color: #2B2B24;
      }
    }
  }
}
</style>
